<template>
  <el-container>
    <el-header style="padding: 1.2%">
      <el-row>
        <el-col :md="2">
          <el-image style="width: 88%;"
                    src="https://www.baidu.com/img/flexible/logo/pc/result.png"></el-image>
        </el-col>
        <el-col :md="8">
          <el-autocomplete
              style="width: 100%;"
              v-model="keyWord"
              placeholder="请输入内容"
              :fetch-suggestions="querySearch"
              @select="handleSelect"
              :trigger-on-focus="false">
            <el-link slot="suffix" icon="el-input__icon el-icon-camera" :underline="false"
                     style="font-size: 20px;"></el-link>
            <el-button id="search_btn" slot="append" @click="searchBtn">百度一下</el-button>
            <template slot-scope="{ item }">
              <div class="title">{{ item.tag }}</div>
            </template>
          </el-autocomplete>
        </el-col>
        <el-col :md="4" :offset="10" style="padding-top: 0.5%">
          <el-link class="header-right" :underline="false">百度首页</el-link>
          <el-link class="header-right" :underline="false">消息</el-link>
          <el-link class="header-right" :underline="false">设置</el-link>
          <el-button
              id="login"
              type="primary"
              class="header-right"
              size="mini"
              @click="dialogLogin = true"
              v-if="!this.$store.getters['user/getUser'].username">
            登录
          </el-button>

          <!--登录消息框-->
          <el-dialog :visible.sync="dialogLogin" style="width: 50%;margin: 0 auto">
            <el-row>
              <el-col :md="8">
                <img src="https://passport.baidu.com/passApi/img/loginlogo.png"/>
              </el-col>
              <el-col :md="16" style="height: 34px"><span
                  style="font-size: 16px;line-height: 38px">用户密码登录</span></el-col>
            </el-row>
            <el-row>
              <el-form :model="user" :rules="rules" ref="loginForm">
                <el-col :md="24" style="margin-top: 15%">
                  <el-form-item prop="username">
                    <el-input v-model="user.username" placeholder="用户名/邮箱/手机号"></el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input v-model="user.password" placeholder="密码"
                              show-password></el-input>
                  </el-form-item>
                </el-col>
                <el-col :md="24">
                  <el-form-item>
                    <el-checkbox label="记住密码"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :md="24" style="margin-top: 2%">
                  <el-form-item>
                    <el-button type="primary" style="width: 100%;font-size: 16px"
                               v-on:click="onSubmit('loginForm')">登录
                    </el-button>
                  </el-form-item>
                </el-col>
                <el-col :md="24" style="margin-top: 2%">
                  <el-link type="primary" :underline="false">忘了密码</el-link>
                </el-col>
              </el-form>
            </el-row>
            <el-row style="margin-top: 15%">
              <el-col :md="6">
                <el-link type="primary" :underline="false">扫码登录</el-link>
                <span style="margin-left: 20%;color: #c4c7ce">|</span>
              </el-col>
              <el-col :md="12">
                <i class="el-icon-platform-eleme i-other"></i>
                <i class="el-icon-info i-other"></i>
                <i class="el-icon-s-promotion i-other"></i>
              </el-col>
              <el-col :md="6">
                <el-link type="primary" :underline="false">立即注册</el-link>
              </el-col>
            </el-row>
          </el-dialog>

          <el-dropdown
              class="header-right"
              v-if="this.$store.getters['user/getUser'].username">
            <span><i class="el-icon-loading"/>{{ this.$store.getters['user/getUser'].username }}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>账号设置</el-dropdown-item>
              <el-dropdown-item>意见反馈</el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" @click='loginOut()'>退出</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding: 0">
      <el-row>
        <el-col :md="16" :offset="2">
          <el-tabs v-model="searchTitle" @tab-click="handleClick">
            <el-tab-pane name="one">
              <span slot="label"><i class="el-icon-search"></i>网页</span>
              <el-row>
                <p class="small_tip">百度为您找到相关结果约{{ searchResults.total }}个</p>
                <el-col :md="14" :offset="0">
                  <div class="news_content"
                       v-for="hit in searchResults.contents" :key="hit.id">
                    <div class="news_title">
                      <a :href="hit.url" v-html="hit.title" target="_blank"/>
                    </div>
                    <div class="text-item limit-line" v-html="hit.content"/>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane name="tow">
              <span slot="label"><i class="el-icon-notebook-2"></i>资讯</span>
              有道无术
            </el-tab-pane>
            <el-tab-pane name="third">
              <span slot="label"><i class="el-icon-video-play"></i>视频</span>
              术尚可求
            </el-tab-pane>
            <el-tab-pane name="fourth">
              <span slot="label"><i class="el-icon-picture"></i>图片</span>
              有术无道
            </el-tab-pane>
            <el-tab-pane name="five">
              <span slot="label"><i class="el-icon-question"></i>知道</span>
              止于术
            </el-tab-pane>
            <el-tab-pane name="six">
              <span slot="label"><i class="el-icon-collection"></i>文库</span>
              天下发生了一大事
            </el-tab-pane>
            <el-tab-pane name="seven">
              <span slot="label"><i class="el-icon-orange"></i>贴吧</span>
              震惊了所有的人
            </el-tab-pane>
            <el-tab-pane name="eight">
              <span slot="label"><i class="el-icon-map-location"></i>地图</span>
              在场的人都被涉及
            </el-tab-pane>
            <el-tab-pane name="night">
              <span slot="label"><i class="el-icon-shopping-bag-1"></i>采购</span>
              的超级事件
            </el-tab-pane>
            <el-tab-pane label="更多" name="ten">
              那就是......
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="background: rgb(245,245,246);width: 100%;position:fixed; bottom:0;">
      <el-col :md="16" :offset="1">
        <el-pagination
            background
            :page-size="size"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
      </el-col>
    </el-footer>
  </el-container>
</template>

<script lang='ts'>
import {Component, Ref, Vue} from 'vue-property-decorator';
import {Form} from "element-ui";
import {UserModule as user} from '@/store/modules/user';

@Component
export default class Search extends Vue {
  private keyWord: string = '';
  private searchTitle: string = 'one';
  private searchResults = {};
  private total: number = 0;
  private size: number = 10;
  private dialogLogin: boolean = false;
  private user = {username: '', password: ''};
  private rules = {
    username: [{required: true, message: '账号不可为空', trigger: 'blur'}],
    password: [{required: true, message: '密码不可为空', trigger: 'blur'}]
  };

  @Ref('loginForm')
  private readonly ruleFormRef!: Form;

  /**
   * 登出
   */
  public loginOut(): void {
    // 清除名字
    this.user.username = '';
    user.updateUser(this.user);
  }

  public onSubmit() {
    this.ruleFormRef.validate((valid: boolean, invalidFields: object) => {
      if (valid) {
        window.console.log('登录');
        user.updateUser(this.user);
        this.dialogLogin = false;
      } else {
        this.dialogLogin = true;
        return false;
      }
    });
  }

  /**
   * 点击操作
   * @param tag .
   * @param event .
   */
  public handleClick(tag: any, event: any) {
    console.log(tag, event);
  }

  /**
   * 查询
   * @param queryString .
   * @param cb .
   */
  public querySearch(queryString: string, cb: any) {
    this.axios.get('http://localhost:8888/news/suggest?prefix=' + queryString)
        .then(resp => {
          // 调用 callback 返回建议列表的数据
          cb(resp.data);
        });
  }

  /**
   * 编辑搜索
   */
  public searchBtn() {
    this.axios.get(`http://localhost:8888/news/search?pager=0&size=${this.size}&text=${this.keyWord}`)
        .then(resp => {
          this.searchResults = resp.data;
          this.total = resp.data.total;
        });
  }

  /**
   * 页码改变
   */
  public currentChange(val: number) {
    this.axios.get(`http://localhost:8888/news/search?pager=${val-1}&size=${this.size}&text=${this.keyWord}`)
        .then(resp => {
          this.searchResults = resp.data;
        });
  }


  /**
   * 点击搜索列表操作
   * @param item .
   */
  public handleSelect(item: any) {
    this.keyWord = item.tag;
    console.log(item.tags);
  }

  /**
   * 钩子函数
   */
  public mounted() {
    this.keyWord = this.$route.params.key_word;
    this.axios.get(`http://localhost:8888/news/search?pager=0&size=${this.size}&text=${this.keyWord}`)
        .then(resp => {
          this.searchResults = resp.data;
        });
  }

}
</script>

<style scoped>
/* 强制设置tab的长度 */
>>> .el-tabs__item {
  padding: 0 3%;
}

/* 搜索按钮 */
#search_btn {
  background: #409EFF;
  color: whitesmoke;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  height: 40px;
}

#search_btn:hover {
  background: #4060ff;
}

/* 条数提示 */
.small_tip {
  font-size: 12px;
  color: #c4c7ce;
  margin: 0;
  padding: 0;
}

/* 右边连接 */
.header-right {
  margin: auto 0 auto 6%;
}

/* 新闻内容 */
.news_content {
  padding: 0;
  margin-top: 4%;
}

/* 标题设置 */
.news_title {
  margin-top: 1%;
  font-size: 18px;
  width: 88%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 内容设置 */
.limit-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

/* 问题样式 */
.text-item {
  margin-top: 1.5%;
}
</style>